import React, { useState } from 'react'
import { NavBar, Space, List, Radio, Button } from 'antd-mobile'
import { SearchOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import '../../css/yjh/Apps.css'
import { useLocation } from 'react-router-dom'
export default function SelectCoupon() {

  const location = useLocation();
  const {totalprice} = location.state

  const [selectedCoupon, setSelectedCoupon] = useState(null);


  const coupon = [
    { "id": 1, "name": '优惠券七折', 'price': 0.7, 'text': '可以给到七折优惠' },
    { "id": 2, "name": '优惠券五折', 'price': 0.5, 'text': '可以给到五折优惠' },
    { "id": 3, "name": '优惠券七五折', 'price': 0.75, 'text': '可以给到七五折优惠' },
    { "id": 4, "name": '优惠券八五折', 'price': 0.85, 'text': '可以给到八五折优惠' },
  ]
  const handleCouponSelect = (id) => {
    setSelectedCoupon(id);
  };


  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ '--gap': '16px' }}>
        <SearchOutline />
      </Space>
    </div>
  )

  const back = () => {
    gotoselect()
  }

  const navgiter = useNavigate()
  const gotoselect = () => {
    navgiter('/apps', {state: {totalprice:totalprice,}})
  }
  const handleConfirm = () => {
    if (selectedCoupon) {
      const selectedCouponData = coupon.find(item => item.id === selectedCoupon);
      if (selectedCouponData) {
        localStorage.setItem('selectedCoupon', JSON.stringify({
          name: selectedCouponData.name,
          price: selectedCouponData.price
        }));
        gotoselect()
      }
    }

  }

  return (
    <div className='Coupons'>
      <NavBar back='选择优惠券' onBack={back} right={right} />

      <div className='Couponss'>
        <List>
          {coupon.map((item) => (
            <List.Item
              key={item.id}
              prefix={
                <Radio
                  checked={selectedCoupon === item.id}
                  onChange={() => handleCouponSelect(item.id)}
                />
              }
            >
              <h3>{item.name}</h3>
              <p>{item.text}</p>
            </List.Item>
          ))}
        </List>
      </div>



      <Button onClick={handleConfirm}>确认</Button>







    </div>
  )
}
